<template>
	<view class="main--">
		<view class="head" v-if="bl" @tap="edit">
			<view class="left">
				<image :src="info.icon" mode=""></image>
			</view>
			<view class="right">
				<view class="name">
					{{info.nickname}}
				</view>
				<view class="user">
					用户名:{{info.username}}
				</view>
			</view>
		</view>
		<view class="head" v-else>
			<view class="left">

			</view>
			<view class="right">
				<view>
					Hi~
				</view>
				<view>
					你还没有登录呢
				</view>
			</view>
		</view>
		<view class="button" v-if="!bl">
			<view class="reg" @tap="goReg()">
				注册
			</view>
			<view class="login" @tap="goLogin()">
				登录
			</view>
		</view>

		<view class="order">
			<view class="t1">
				我的订单
			</view>
			<view class="main">
				<view @tap="goOrder(index)" class="box" v-for="(item , index) in list" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="big">
			<view class="box" v-for="(item , index) in list2" :key="index" @tap="go(item.name)">
				<image :src="item.img" mode=""></image>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mix from "../mixins/mixins.js"
	// import mix from "/pages/mixins/mixins.js"

	export default {
		data() {
			return {
				bl: false,
				info: '',
				list: [{
						name: '待付款',
						img: '/static/icons/icon-pay.png'
					},
					{
						name: '已付款',
						img: '/static/icons/pay-done.png'
					},
					{
						name: '已发货',
						img: '/static/icons/icon-car.png'
					},
					{
						name: '已收货',
						img: '/static/icons/icon-done.png'
					},
					{
						name: '售后',
						img: '/static/icons/icon-back.png'
					}
				],
				list2: [{
						name: '商品收藏',
						img: '/static/icons/save.png'
					},
					{
						name: '品牌',
						img: '/static/icons/brand.png'
					},
					{
						name: '文章收藏',
						img: '/static/icons/article.png'
					},
					{
						name: '地址',
						img: '/static/icons/address.png'
					},
					{
						name: '卡包',
						img: '/static/icons/card.png'
					},
					{
						name: '购物车',
						img: '/static/icons/cart2.png'
					},
					{
						name: '联系客服',
						img: '/static/icons/tel.png'
					}
				],
			}
		},
		mixins: [mix],
		onShow() {
			if (this.checkLogins()) {
				// 发送ajax
				console.log("发送ajax")
				this.bl = true;
			}
			var dl = uni.getStorageSync("userInfo");
			var token = uni.getStorageSync("token");
			if (token == '') {
				this.bl = false;
			}
			this.info = dl;
			console.log(this.info)
		},
		onLoad() {

		},
		methods: {
			edit() {
				// console.log(11)
				uni.navigateTo({
					url: `/pages/mine/edit`
				})
			},
			go(val) {
				if (this.checkLogins()) {
					// 发送ajax
					if (val == '地址') {
						uni.navigateTo({
							url: `/pages/mine/address/address`
						})
					} else if (val == '购物车') {
						uni.navigateTo({
							url: `/pages/mine/cart`
						})
					} else if(val == '商品收藏'){
						uni.navigateTo({
							url:`/pages/mine/detailcollect/detailcollect`,
							
						})
					} else if(val == '文章收藏'){
						uni.navigateTo({
							url:`/pages/mine/articlecollect/articlecollect`,
							
						})
					} else{
						uni.showToast({
							title:'功能暂未开放',
							icon:'none'
						})
					}
					
					
					
					
				}

			},
			goOrder(val) {
				if (this.checkLogins()) {
					// 发送ajax
					uni.navigateTo({
						// url:`/pages/Detail/confirmOrder/confirmOrder?id=${orderId}`
						url: `/pages/mine/order/order?id=${val}`
					})
				}
			},
			goLogin(){
				uni.navigateTo({
					url:"/pages/mine/login/login"
				})
			},
			goReg(){
				uni.navigateTo({
					url:`/pages/mine/register`
				})	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-- {
		padding: 0 40rpx;
	}

	.head {
		padding-top: 60rpx;
		display: flex;

		.left {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #C8C7CC;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.right {
			margin-left: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 14rpx 0;

			.name {
				font-size: 40rpx;
				font-weight: 600;
			}

			.user {
				font-size: 26rpx;
				color: #999;
			}

		}



	}

	.button {
		margin: 40rpx auto;
		display: flex;
		// align-items: center;
		justify-content: space-around;

		view {
			width: 182rpx;
			height: 76rpx;
			box-sizing: border-box;
			border: 1px solid #354e44;
			// color: #354e44;
			font-size: 15px;
			text-align: center;
			line-height: 38px;
			border-radius: 5px;
			margin: 0 15px;
		}

		.login {
			background-color: #354e44;
			color: #fff;
		}
	}

	.order {
		box-sizing: border-box;
		width: 670rpx;
		height: 208rpx;
		border-radius: 4rpx;
		background-color: #fff;
		margin-top: 60rpx;
		padding: 0 54rpx;

		.t1 {
			height: 38px;
			font-size: 13px;
			line-height: 38px;

			box-sizing: border-box;
			// margin: 0 27px;
		}

		.main {
			width: 100%;
			// padding: 0 54rpx;
			box-sizing: border-box;
			border-top: 2rpx solid #E5E5E5;

			display: flex;
			justify-content: space-between;

			.box {
				// display: flex;
				text-align: center;
				margin-top: 20rpx;
				font-size: 26rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.big {
		width: 670rpx;
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		padding: 30rpx 0 0;
		display: flex;
		flex-wrap: wrap;

		.box {
			font-size: 26rpx;
			line-height: 38px;
			width: 33.33%;
			height: 200rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>
